/*
 * @Author: 李九阳
 * @Date: 2021-12-13 20:19:03
 * @LastEditors: 李九阳
 * @LastEditTime: 2021-12-14 10:17:26
 */
// 需求：实现长按，用户需要按下并按住按钮几秒钟，触发相应的事件

// 思路：

// 创建一个计时器， 2 秒后执行函数
// 当用户按下按钮时触发 mousedown 事件，启动计时器；用户松开按钮时调用 mouseout 事件。
// 如果 mouseup 事件 2 秒内被触发，就清除计时器，当作一个普通的点击事件
// 如果计时器没有在 2 秒内清除，则判定为一次长按，可以执行关联的函数。
// 在移动端要考虑 touchstart，touchend 事件
import { App } from "vue";
export default (app: App<Element>) => {
  app.directive("longpress", {
    beforeMount: function (el: any, binding: any, vNode: any) {
      if (typeof binding.value !== "function") {
        throw "callback must be a function";
      }
      // 定义变量
      let pressTimer: any = null;
      // 创建计时器（ 2秒后执行函数 ）
      const start = (e: any) => {
        if (e.type === "click" && e.button !== 0) {
          return;
        }
        if (pressTimer === null) {
          pressTimer = setTimeout(() => {
            handler(e);
          }, 2000);
        }
      };
      // 取消计时器
      const cancel = (e: any) => {
        if (pressTimer !== null) {
          clearTimeout(pressTimer);
          pressTimer = null;
        }
      };
      // 运行函数
      const handler = (e: any) => {
        binding.value(e);
      };
      // 添加事件监听器
      el.addEventListener("mousedown", start);
      el.addEventListener("touchstart", start);
      // 取消计时器
      el.addEventListener("click", cancel);
      el.addEventListener("mouseout", cancel);
      el.addEventListener("touchend", cancel);
      el.addEventListener("touchcancel", cancel);
    },
    // 当传进来的值更新的时候触发
    updated(el: any, { value }: any) {
      el.$value = value;
    },
    // 指令与元素解绑的时候，移除事件绑定
    unmounted(el: any) {
      el.removeEventListener("click", el.handler);
    },
  });
};
